<template>
	<div class="application-info">
		<div class="w inner">
			<div class="title">开发者申请</div>
			<div class="title-info">
				<div class="inner">
					<span class="jindu">申请进度：</span>
					<span class="type" :class="{'success':sq.success,'waiting':sq.waiting,'notpass':sq.noPass,'frozen':sq.frozen}">{{sq.Text}}</span>
					<span @click="pushPrev" class="repeat" v-show="sq.noPass ">[重新申请]</span>
					<p v-show="sq.noPass || sq.frozen">原因：<span>{{sq.reason}}</span></p>
				</div>
			</div>
			<div class="content">
				<div class="c-title">开发者资料</div>
				<div class="contentInfo">
					<div class="h70">
						<span class="pub-left">账号：</span>
						<span class="infoRight">{{info.yh}}</span>
					</div>
					<div class="h70">
						<span class="pub-left">联系人：</span>
						<span class="infoRight">{{info.lxr}}</span>
					</div>
					<div class="h70">
						<span class="pub-left">手机：</span>
						<span class="infoRight">{{info.sj}}</span>
					</div>
					<div class="h70">
						<span class="pub-left">公司名称：</span>
						<span class="infoRight">{{info.gsmc}}</span>
					</div>
					<div class="yyzz">
						<span class="pub-left">营业执照：</span>
						<div class="img"><img :src="info.imgUrl"/></div>
					</div>
					<div class="h70">
						<span class="pub-left">通讯地址：</span>
						<span class="infoRight">{{info.txdz}}</span>
					</div>
					<div class="h70">
						<span class="pub-left">公司邮箱：</span>
						<span class="infoRight">{{info.email}}</span>
					</div>
					<div class="h70" style="padding-top: 20px;">
						<span class="pub-left yt-l fl">剑鱼数据用途：</span>
						<span class="infoRight yt">{{info.yt}}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { kaifazhe } from '../api/getData.js'
	export default {
		name: 'application-info',
		data: function() {
			return {
				/*申请进度*/
				sq: {
					success: false,
					waiting: false,
					noPass: false,
					frozen: false,
					Text: '成功',
					reason: "文字描述文字描述文字描"
				},
				/*信息*/
				info: {
					yh: "",
					lxr: "",
					sj: "",
					gsmc: "",
					imgUrl:"",
					txdz:"",
					email:"",
					yt:""
				}
			}
		},
		created: function() {
			kaifazhe().then((data)=>{
				
				let info = data.data.developerInfo;
                let name = data.data.userInfo.type === 1 ? info.s_nickname : '用户名 / ' + info.s_nickname
				this.info.yh = info.s_nickname;
				this.info.lxr = info.s_linkman;
				this.info.sj = info.s_mobile;
				this.info.gsmc = info.s_enterprisename;
				this.info.txdz = info.s_province + info.s_city + info.s_county+info.s_address;
				this.info.email = info.s_email;
				this.info.yt = info.s_purpose;
				this.info.imgUrl = info.s_blicense;
				
				if(data.data.developerInfo.i_freeze == -1){//冻结
					this.sq.frozen = true;
					this.sq.Text = "冻结";
					this.sq.reason = data.data.developerInfo.s_frozenreason;
				}else if(data.data.developerInfo.i_status == 0){//待审核
					this.sq.waiting = true;
					this.sq.Text = "待审核"
				}else if(data.data.developerInfo.i_status == 1){//通过
					this.sq.success = true;
					this.sq.Text = "审核通过"
				}else if(data.data.developerInfo.i_status == -1){//没通过
					this.sq.noPass = true;
					this.sq.Text = "审核不通过";
					this.sq.reason = data.data.developerInfo.s_notgoreason;
				}
			})
		}, // 创建时
		beforeMount: function() {}, // 挂载之前
		mounted: function() {
			this.$bus.$emit('footShow',false)
		}, // 挂载之后
		beforeUpdate: function() {}, // 数据更新时调用,在渲染之前
		updated: function() {}, // 数据更新后,渲染后调用(禁止)
		beforeDestroy: function() {}, // 实例销毁前调用,解绑中间层的数据传输
		destroyed: function() {}, // 实例销毁后调用
		methods: {
			pushPrev(){
				this.$router.push({ path: '/application', query: { reapply: 'true'}})
			}
		}, // 函数
		watch:{
			
		}
	}
</script>

<style lang="scss">
	.application-info {
		box-sizing: border-box;
		background-color: #f8f8fc;
		.inner {
			.title {
				line-height: 80px;
				color: #2CB7CA;
				font-size: 24px;
				background-color: transparent;
			}
			.title-info {
				padding: 22px 30px;
				box-sizing: border-box;
				background-color: #fff;
				border: 1px solid #e7e7e7;
				border-top: 2px solid #2cb7ca;
				margin-bottom: 17px;
				.inner {
					background-color: #f8f8fc;
					padding: 26px 26px 24px 26px;
					.jindu {
						font-size: 18px;
						color: #666666;
					}
					.repeat {
						font-size: 16px;
						color: #2CB7CA;
						cursor: pointer;
					}
					.type {
						font-size: 26px;
						margin: 0 12px;
						&.success {
							color: #10a304;
						}
						&.waiting {
							color: #e58f14;
						}
						&.notpass {
							color: #ff0101;
						}
						&.frozen {
							color: #333333;
						}
					}
					p {
						line-height: 25px;
						padding-left: 30px;
						font-size: 16px;
						color: #999;
						margin-top: 30px;
					}
				}
			}
			.content {
				background-color: #fff;
				border: 1px solid #e7e7e7;
				border-top: 2px solid #2cb7ca;
				margin-bottom: 22px;
				.c-title {
					line-height: 80px;
					background: #f9feff url(../assets/yellow-radious.png) 30px center no-repeat;
					padding-left: 60px;
					font-size: 18px;
					border: 1px solid #e7e7e7;
				}
				.contentInfo {
					padding:0 30px 30px 30px;
					background-color: #fff;
					.h70 {
						overflow: hidden;
						line-height: 70px;
						border-bottom:1px solid #e7e7e7;
						&:last-child{
							border: none;
						}
						.infoRight {
							display: inline-block;
							font-size: 16px;
							color: #000000;
						}
						.yt-l{
							line-height: 36px;
						}
						.yt{
							float: right;
							width: 1010px;
							line-height: 36px;
							word-break: break-all;
						}
					}
					.yyzz {
						overflow: hidden;
						margin: 22px 0;
						.pub-left {
							float: left;
							line-height: 20px;
						}
						.img {
							float: left;
							width: 1000px;
							height: 688px;
							margin-left: 5px;
							padding: 30px;
							box-sizing: border-box;
							border: 1px solid #e7e7e7;
							border-radius: 6px;
							img{
								width: 100%;
								height: 100%;
							}
						}
					}
					.pub-left {
						display: inline-block;
						width: 120px;
						height: 70px;
						line-height: 70px;
						color: #666666;
						font-size: 16px;
						text-align: right;
					}
				}
			}
		}
	}
</style>